<template>
  <div class="store">
    <!-- 主页搜索框 -->
    <header class="store-header">
      <img class="header-img" src="../../assets/img/store/2.webp" alt="" />
      <van-search v-model="value" placeholder="搜索宠物商品" />
      <div class="header-qiandao">
        <img src="../../assets/img/store/4.webp" alt="" />
        <span>签到</span>
      </div>
    </header>
    <!-- 主页轮播图 -->
    <div class="store-banner">
      <img src="../../assets/img/store/5.webp" alt="" />
    </div>
    <!-- 商品分类 -->
    <ul class="store-classify">
      <li
        v-for="(item, index) in classifyData.classify"
        :key="index"
        @click="handleClassify()"
        class="store-classify-item"
      >
        <img :src="item.imgurl" alt="" />
        {{ item.title }}
      </li>
    </ul>
    <!-- 限时购,拼团 -->
    <div class="store-items">
      <div class="store-item">
        <span class="store-item-title">限时购</span>
        <ul class="store-item-ul">
          <li
            v-for="(item, index) in xianshigouData"
            :key="index"
            class="store-item-li"
          >
            <div class="store-img">
              <van-image fit="contain" :src="item.imgurl" />
            </div>
            <p class="store-item-price">¥ {{ item.price }}</p>
          </li>
        </ul>
      </div>
      <div class="store-item">
        <span class="store-item-title">拼团</span>
        <ul class="store-item-ul">
          <li
            v-for="(item, index) in productData.slice(-2)"
            :key="index"
            class="store-item-li"
            @click="goClick(item._id)"
          >
            <div class="store-img">
              <van-image fit="scale-down" height="64px" :src="item.imgurl" />
            </div>
            <p class="store-item-price">¥ {{ item.price }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 商城宣传图 -->
    <div class="store-xuanchuan">
      <img src="../../assets/img/store/20.webp" alt="" />
      <img src="../../assets/img/store/20.webp" alt="" />
    </div>
    <!--  宠明优选 -->
    <div class="store-tabs">
      <div class="store-tab" @click="tabSwitch(0)">
        <p
          class="store-tab-title"
          :class="[{ 'store-tab-title-active': active === 0 }]"
        >
          宠明优选
        </p>
        <p
          class="store-tab-stitle"
          :class="[{ 'store-tab-stitle-active': active === 0 }]"
        >
          宠友力荐
        </p>
      </div>
      <div class="store-tab" @click="tabSwitch(1)">
        <p
          class="store-tab-title"
          :class="[{ 'store-tab-title-active': active === 1 }]"
        >
          新品首发
        </p>
        <p
          class="store-tab-stitle"
          :class="[{ 'store-tab-stitle-active': active === 1 }]"
        >
          好物尝鲜
        </p>
      </div>
      <div class="store-tab" @click="tabSwitch(2)">
        <p
          class="store-tab-title"
          :class="[{ 'store-tab-title-active': active === 2 }]"
        >
          便宜好货
        </p>
        <p
          class="store-tab-stitle"
          :class="[{ 'store-tab-stitle-active': active === 2 }]"
        >
          低价捡漏
        </p>
      </div>
      <div class="store-tab" @click="tabSwitch(3)">
        <p
          class="store-tab-title"
          :class="[{ 'store-tab-title-active': active === 3 }]"
        >
          进口大牌
        </p>
        <p
          class="store-tab-stitle"
          :class="[{ 'store-tab-stitle-active': active === 3 }]"
        >
          品质之选
        </p>
      </div>
    </div>
    <!-- 宠明优选内容 -->
    <ul class="sort_content clearfix" v-show="active === 0">
      <li
        class="clone"
        v-for="(item, index) in productData"
        :key="index"
        @click="goClick(item._id)"
      >
        <div class="clone_img">
          <van-image :src="item.imgurl" fit="scale-down" />
        </div>
        <p class="clone_title">{{ item.title }}</p>
        <p class="clone_msg">{{ item.littleTitle }}</p>
        <p class="clone_price">¥{{ item.price }}</p>
      </li>
    </ul>
    <div style="height: 49px"></div>
  </div>
</template>

<script>
import http from "../../utils/api";
import { ref, reactive, onMounted } from "vue";
import router from "../../router/index.js";
export default {
  setup() {
    const value = ref("");
    const active = ref(0);
    const classifyData = reactive({});
    const productData = reactive([]);
    const xianshigouData = reactive([]);
    const tabSwitch = (i) => {
      active.value = i;
    };
    onMounted(() => {
      http.getIndexClassify().then((res) => {
        classifyData.classify = res.data.data.classify;
      });
      http.getproduct().then((res) => {
        productData.push(...res.data.data);
        for (const item of productData) {
          if (item.morearea === "限时购") {
            xianshigouData.push(item);
          }
          if (xianshigouData.length > 1) {
            break;
          }
        }
      });
    });
    const handleClassify = () => {
      router.push("/main/classify");
    };
    const goClick = function (_id) {
      router.push("/product/" + _id);
    };
    return {
      value,
      classifyData,
      handleClassify,
      productData,
      xianshigouData,
      active,
      tabSwitch,
      goClick,
    };
  },
};
</script>
<style lang="less" scoped>
.store {
  width: 100%;
  overflow: hidden;
  background-color: rgb(247, 247, 247);
}
.store-header {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background-color: #fff;
  .van-field__body {
    width: 240px;
    height: 24px;
  }
  .header-img {
    width: 28px;
  }
  .header-qiandao {
    font-size: 12px;
    img {
      width: 15px;
      // padding: 5px;
      margin-right: 5px;
    }
  }
}
.store-banner {
  margin: 10px 4px 0;
  img {
    width: 367px;
  }
}
.store-classify {
  width: 365px;
  height: 200px;
  margin: 0 auto 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
  background-color: #fff;
  .store-classify-item {
    width: 72px;
    height: 75px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  img {
    width: 51px;
    height: 52px;
  }
}
.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.store-items {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 5px;
  width: 365px;
  height: 140px;
  ul {
    height: unset;
  }
  .store-item {
    padding: 14px;
    width: 180px;
    height: 140px;
    background-color: #fff;
    .store-item-title {
      font-size: 16px;
    }
    .store-item-ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 13px;
    }
    .store-item-li {
      display: flex;
      flex-direction: column;
      align-items: center;
      .store-item-price {
        font-size: 12px;
        color: #ff0827;
        font-weight: bold;
      }
    }
  }
  .store-img {
    width: 64px;
    height: 64px;
  }
}
.store-xuanchuan {
  margin: 0 auto 5px;
  width: 365px;
  display: flex;
  justify-content: space-around;
  img {
    width: 181px;
    height: 102px;
  }
}
.sort_content {
  width: 100%;
  .clone {
    width: 176px;
    margin: 5px;
    float: left;
    background-color: #fff;
    .clone_img {
      width: 176px;
      height: 180px;
    }
    .van-image {
      width: 176px;
      height: 180px;
    }
    .clone_title {
      font-size: 15px;
      text-align: center;
      line-height: 21px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .clone_msg {
      font-size: 14px;
      color: grey;
      line-height: 19px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .clone_price {
      font-size: 13px;
      color: red;
      margin: 10px;
    }
  }
}
.store-tabs {
  height: 54px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .store-tab {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .store-tab-title {
      font-size: 15px;
      margin-bottom: 5px;
    }
    .store-tab-stitle {
      font-size: 12px;
      width: 60px;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .store-tab-title-active {
      color: red;
    }
    .store-tab-stitle-active {
      background-color: red;
      color: #fff;
      border-radius: 10px;
    }
  }
}
</style>
